<template>
  <PageLayout title="登录">
    <view class="login-container">
      <!-- 波浪背景 -->
      <view class="wave-bg">
        <view class="wave wave1"></view>
        <view class="wave wave2"></view>
      </view>

      <!-- 品牌标识 -->
      <view class="brand">
        <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
        <text class="brand-name">岚迹社区</text>
        <text class="slogan">分享生活，连接世界</text>
      </view>

      <!-- 登录区域 -->
      <view class="login-area">
        <view class="login-title">微信一键登录</view>
        <view class="login-subtitle">使用微信小程序登录更方便、更安全</view>

        <button class="wechat-login-btn" open-type="getUserInfo" @tap="handleWechatLogin">
          <uni-icons type="weixin" size="20" color="#ffffff"></uni-icons>
          <text class="btn-text">微信登录</text>
        </button>
      </view>
    </view>
  </PageLayout>
</template>

<script setup>
import {ref} from 'vue';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import PageLayout from '@/components/PageLayout.vue'


// 微信登录状态
const isWechatLoggingIn = ref(false);

// 微信登录处理
const handleWechatLogin = () => {
	// 防止重复点击
	if (isWechatLoggingIn.value) return;
	
	isWechatLoggingIn.value = true;
	
	// 获取平台信息
	const platform = uni.getSystemInfoSync().platform;
	
	// 小程序环境直接调用微信登录
	uni.showLoading({
		title: '请求授权中...'
	});
	
	// 获取微信登录凭证
	uni.login({
		provider: 'weixin',
		success: (loginRes) => {
			console.log('微信登录成功', loginRes);
			// 获取用户信息
			uni.getUserInfo({
				provider: 'weixin',
				success: (infoRes) => {
					console.log('获取用户信息成功', infoRes);
					// 处理登录逻辑，拿到凭证后调用后端接口
					requestWechatLogin(loginRes.code, infoRes.userInfo);
				},
				fail: (err) => {
					console.error('获取用户信息失败', err);
					uni.hideLoading();
					uni.showToast({
						title: '获取微信用户信息失败',
						icon: 'none'
					});
					isWechatLoggingIn.value = false;
				}
			});
		},
		fail: (err) => {
			console.error('微信登录失败', err);
			uni.hideLoading();
			uni.showToast({
				title: '微信登录失败',
				icon: 'none'
			});
			isWechatLoggingIn.value = false;
		}
	});
};

// 请求后端微信登录接口
const requestWechatLogin = (code, userInfo) => {
	console.log('请求微信登录接口', code, userInfo);
	
	// 模拟请求后端接口
	setTimeout(() => {
		uni.hideLoading();
		
		// 存储用户信息
		uni.setStorageSync('userInfo', {
			id: 'wx_' + Date.now(),
			nickname: userInfo.nickName || '微信用户',
			avatar: userInfo.avatarUrl,
			token: 'token_' + Math.random().toString(36).substr(2)
		});
		
		// 显示登录成功
		uni.showToast({
			title: '登录成功',
			icon: 'success'
		});
		
		// 延迟跳转到首页
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}, 1500);
		
		isWechatLoggingIn.value = false;
	}, 1000);
};
</script>

<style lang="scss">
/* 移除不必要的页面样式，PageLayout已提供基础布局 */
page {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	width: 100%;
	min-height: 100%;
	background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
	box-sizing: border-box;
}

/* 波浪背景 */
.wave-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 45%;
	background: linear-gradient(135deg, #6e8efb, #a777e3);
	border-radius: 0 0 50% 50% / 20%;
	overflow: hidden;
	z-index: 0;
}

.wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 200%;
	height: 60rpx;
	opacity: 0.5;
	border-radius: 50% 50% 0 0 / 100%;
	
	&.wave1 {
		bottom: -25rpx;
		background: rgba(255, 255, 255, 0.5);
		animation: wave 10s linear infinite;
	}
	
	&.wave2 {
		bottom: -35rpx;
		background: rgba(255, 255, 255, 0.3);
		animation: wave 7s linear infinite reverse;
	}
}

@keyframes wave {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* 品牌标识 - 调整顶部边距，不再依赖var变量 */
.brand {
	margin-top: 60rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1;
	position: relative;
}

.logo {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 20rpx;
}

.brand-name {
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 10rpx;
	text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.slogan {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
}

/* 登录区域 */
.login-area {
	width: 85%;
	padding: 60rpx 40rpx;
	margin-top: 60rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.login-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	text-align: center;
}

.login-subtitle {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 60rpx;
	text-align: center;
}

.wechat-login-btn {
	width: 80%;
	height: 90rpx;
	background: #07c160;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: bold;
	border-radius: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 10rpx 20rpx rgba(7, 193, 96, 0.3);
	transition: opacity 0.3s;
	margin-bottom: 20rpx;
	
	&:active {
		opacity: 0.8;
	}
	
	.btn-text {
		margin-left: 10rpx;
	}
}
</style>